<!--
 * @Description: 文件上传组件
 * @Author: liyujie
 * @Date: 2021/02/07
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/02/07
-->
<template>
    <section class="wrapper">
        <el-upload
            class="upload-view"
            action="noAction"
            ref="upload"
            :http-request="handleUpload"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
            :file-list="fileList"
            drag
            multiple
            show-file-list
            :accept="accept"
        >
            <i class="el-icon-upload2"/>
            <div class="el-upload__text">点击或将文件拖拽到这里上传</div>
            <div class="el-upload__tip">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
        </el-upload>
    </section>
</template>

<script>
export default {
    name: 'FileUpload',
    props: {
        fileList: {
            type: Array,
            default: () => {
                return [];
            }
        },
        accept: {
            type: String,
            default: ''
        }
    },
    model: {
        prop: 'fileList',
        event: 'change'
    },
    data() {
        return {
            result: []
        };
    },
    mounted(){},
    methods:{

        /**
         * 文件上传
         * @param e
         */
        handleUpload(e) {
            let file = new FormData();

            file.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: file,
                progress: e.onProgress,
                success: resp => {
                    if(resp.code === 1) {
                        this.result.push({name: e.file.name,url:resp.data.url});
                        e.onSuccess();
                    } else {
                        this.$message.warning(resp.msg);
                        try {
                            e.onError();
                            // eslint-disable-next-line no-empty
                        } catch (e) {}
                    }
                    this.$emit('change', this.result);
                }
            });
        },

        /**
         * 移除文件
         * @param file
         * @param fileList
         */
        handleRemove(file,fileList) {
            this.result = fileList;
            this.$emit('change', fileList);
        },
        /**
         * 预览文件
         * @param file
         */
        handlePreview(file) {
            window.open(file.url);
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    // 上传
    .upload-view {
        /deep/ .el-upload {
            margin-top: 12px;
            .el-upload-dragger {
                display: block;
                width: 468px;
                height: 170px;
                background: rgba(27, 145, 255, 0.05);
                border-radius: 4px;
                border: 1px dashed #1890FF;
                .el-icon-upload2 {
                    font-size: 38px;
                    font-weight: 600;
                    margin: 32px 0 14px;
                    line-height: 50px;
                    color: #1890FF;
                }
                .el-upload__text {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #20A0FF;
                    line-height: 14px;
                }
                .el-upload__tip {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.5);
                    line-height: 12px;
                    margin-top: 12px;
                }
            }
        }
        /deep/ .el-upload-list {
            width: 480px;
            .el-upload-list__item {
                outline: none;
            }
        }
    }
}
</style>
